<template>
  <a-result :title="title">
    <template #icon>
      <div class="c-slack">
        <span class="c-slack__dot c-slack__dot--a"></span>
        <span class="c-slack__dot c-slack__dot--b"></span>
        <span class="c-slack__dot c-slack__dot--c"></span>
        <span class="c-slack__dot c-slack__dot--d"></span>
      </div>
    </template>
    <template #extra>
      <a-button @click="toHome" type="primary">
        回到首页
      </a-button>
    </template>
  </a-result>
</template>

<script>
  const loaderModuleScript = async (moduleName) => {
    if (!window[moduleName]) {
      return new Promise((resolve) => {
        window.app.$moduleLoader({
          [moduleName]: `http://${window.location.host}/dist/${moduleName}.umd.min.js`
        }).then(() => {
          resolve()
        })
      })
    } else {
      return Promise.resolve({ name: 'mock-xxxx' })
    }
  }
  export default {
    name: 'Pulling',
    data: () => ({
      title: '模块加载中...'
    }),
    created () {
      this.load()
    },
    methods: {
      load () {
        const { moduleName } = this.$route.params
        const { lazyUrl } = this.$route.query
        this.title = '没有模块需要拉取!'
        if (!lazyUrl) return
        this.title = '请稍后!正在安装所需的模块!'
        loaderModuleScript(moduleName).then(() => {
          setTimeout(() => {
            this.$router.push({
            path: `/portal/module/${lazyUrl}`,
            replace: true
          })
          }, 1000)
        })
      },
      toHome () {
        this.$router.push({ path: '/' })
      }
    }
  }
</script>
<style scoped>
.c-slack{
  margin: 80px auto;
}
</style>
